<template>
  <!-- 下面第一个图表 -->
  <div
    id="main3"
    style="height: 100%; width: 100%; box-sizing: border-box; padding: 5px"
  ></div>
</template>
<script>
import * as echarts from "echarts";
import axios from "axios";
export default {
  data() {
    return {
      chanLiang: [],
      chanLiangRiQi: [],
    };
  },
  created() {
    this.getDataList();
  },
  mounted() {},
  methods: {
    // 请求接口，获取数据
    getDataList() {
      axios({
        method: "get",
        url: `${window.location.origin}/apigateway/api/dataset/1637724384108699650`,
        headers: {
          apiKey: "a92a7db58b234595951bb2b39fcf6430",
        },
      }).then((res) => {
        res.data.data.forEach((element) => {
          this.chanLiang = [];
          this.chanLiangRiQi = [];
          this.chanLiang.push(element.total_count);
          this.chanLiangRiQi.push(element.date_formatted);
        });
        this.initCharts();
        console.log(res, "过去7天产量数据");
      });
    },
    // 柱状图
    initCharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main3"));
      // 实现相应式，跟随页面变化
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "过去7天产量数据",
          textStyle: {
            color: "#fff",
          },
        },

        color: ["#75bedc"],
        // 提示框
        tooltip: {},
        // 图例
        legend: {
          textStyle: {
            color: "#fff",
          },
          //  data: ['产量']
        },
        // 表示x轴坐标
        xAxis: {
          axisLabel: {
            show: true,
            color: "#ffffff",
            fontSize: 16,
          },
          data: this.chanLiangRiQi,
        },
        // 表示y轴坐标
        yAxis: {
          axisLabel: {
            show: true,
            color: "#ffffff",
            fontSize: 16,
          },
          // data: [20000, 40000, 80000, 100000, 120000, 140000]
        },
        //
        series: [
          {
            name: "产量",
            type: "bar",
            data: this.chanLiang,
            label: {
              show: true,
              position: "top",
              formatter: "{c}",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style></style>
